import { useState } from 'react'
import { getData2 } from '../Data'
import { useMount, useReactive } from 'ahooks'

import { FlexGrid, FlexGridColumn } from '@grapecity/wijmo.react.grid'
import { changeType, DataType, isNumber } from '@grapecity/wijmo';
const WijmoF02 = () => {

    const InitData = useReactive({ countries: ['亚洲', '欧洲', '非洲', '大洋洲', '南极洲', '南美洲', '北美洲'] })
    const [Data, setData] = useState()
    useMount(() => { setData(getData2(100)) })
    const init = (init) => {
        init.cellEditEnding.addHandler((s, e) => {
            let col = s.columns[e.col]
            if (col.binding == 'sales' || col.binding == 'expenses') {
                let value = changeType(s.activeEditor.value, DataType.Number, col.format)
                if (!isNumber(value) || value < 0) {
                    e.cancel = true
                    e.stayInEditMode = true
                    console.log('请输入指定类型数据')
                }
            }
        })
    }

    if (Data) {
        return (
            <div className="Page">
                <FlexGrid initialized={init} itemsSource={Data}>
                    <FlexGridColumn binding="id" header="ID" width={50} isReadOnly={true} />
                    <FlexGridColumn binding="country" header="Country" isRequired={true} dataMap={InitData.countries} />
                    <FlexGridColumn binding="sales" header="Sales" format="n2" />
                    <FlexGridColumn binding="expenses" header="Expenses" format="n2" />
                    <FlexGridColumn binding="state" header="state" />
                </FlexGrid>
            </div>
        )
    }
}

export default WijmoF02;